<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ribbon Sharing Demo</title>
<style type='text/css'>
/*---Mbl Animated Social Widget ---*/  
 .mypreiumlab{  
  padding: 0;  
  width: 535px;  
  height: 70px;  
  margin: 80px auto 30px auto;  
 }  
 .bt-wrapper ul{  
  float: left;  
 margin-left: -45px;  
 }  
 .bt-wrapper ul a{  
  display: block;  
  width: 68px;  
  height: 110px;  
  margin: -10 -24 px;  
  outline: none;  
  background: transparent url(http://1.bp.blogspot.com/-d7whKSAmyHY/UG0J8CDV-cI/AAAAAAAAEoA/Bcl9B6t2T74/s1600/bloggertrix%2B-.png) no-repeat top left;  
  text-indent: -9000px;  
  position: relative;  
 }  
 .bt-wrapper ul .bt-gplus{  
   background-position: 0px 0px;  
 }  
 .bt-wrapper ul .bt-twitter{  
   background-position: -68px 0px;  
 }  
 .bt-wrapper ul .bt-pinterest{  
   background-position: -136px 0px;  
 }  
 .bt-wrapper ul .bt-facebook{  
   background-position: -204px 0px;  
 }  
 .bt-wrapper ul .bt-linkedin{  
   background-position: -272px 0px;  
 }  
 .bt-wrapper ul .bt-rss{  
   background-position: -340px 0px;  
 }  
 .bt-wrapper ul a span{  
 margin-bottom: 50px;  
  width: 100px;  
  height: auto;  
  line-height: 20px;  
  padding: 10px;  
  left: 50%;  
  margin-left: -64px;  
  font-family: Shanti, Arial, Helvetica, sans-serif;  
  font-weight: 400;   
  font-size: 14px;  
  color: #2f6986;  
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);  
  text-align: center;  
  border: 4px solid #2f6986;  
  background: rgba(255,255,255,0.3);  
  text-indent: 0px;  
  border-radius: 5px;  
  position: absolute;  
  pointer-events: none;  
  bottom: 100px;  
  opacity: 0;  
  box-shadow: 1px 1px 2px rgba(0,0,0,0.1);  
  -webkit-transition: all 0.3s ease-in-out;  
  -moz-transition: all 0.3s ease-in-out;  
  -o-transition: all 0.3s ease-in-out;  
  -ms-transition: all 0.3s ease-in-out;  
  transition: all 0.3s ease-in-out;  
 }  
 .bt-wrapper ul a span:before,  
 .bt-wrapper ul a span:after{  
 margin-top:20px;  
  content: '';  
  position: absolute;  
  bottom: -15px;  
  left: 50%;  
  margin-left: -9px;  
  width: 0;  
  height: 0;  
  border-left: 10px solid transparent;  
  border-right: 10px solid transparent;  
  border-top: 10px solid rgba(0,0,0,0.1);  
 }  
 .bt-wrapper ul a span:after{  
  bottom: -14px;  
  margin-left: -10px;  
  border-top: 10px solid #2f6986;  
 }  
 .bt-wrapper ul a:hover span{  
  opacity: 0.9;  
  bottom: 70px; 
} 
</style>
</head>

<body>
<div class="mypremiumlab">  
   <ul><a class="bt-gplus " href="https://plus.google.com/109713669535816781755"><span>Google Plus</span></a></ul>  
   <ul><a class="bt-twitter" href="http://twitter.com/mypremiumlab"><span>Twitter</span></a></ul>  
   <ul><a class="bt-pinterest" href="http://pinterest.com/mypremiumlab"><span>Pinterest</span></a></ul>  
   <ul><a class="bt-facebook" href="http://www.facebook.com/mypremiumlab"><span>Facebook</span></a></ul>  
   <ul><a class="bt-linkedin" href="http://www.linkedin.com/#"><span>LinkedIn</span></a></ul>  
   <ul><a class="bt-rss" href="http://feeds.feedburner.com/mypremiumlab"><span>Feeds</span></a></ul>  
   </div> 
</body>
</html>
